<template>
  <div class="product-detail">
    <!-- 标题与元信息整合模块 -->
    <div class="product-header module-border">
      <!-- 左侧图片 -->
      <div class="product-image-container">
        <!-- <div class="product-image-placeholder"></div> -->
         <el-image
          :src="product.image"
          fit="contain"
          alt="产品图片"
         >
         <!--  :preview-src-list="[product.image]" -->
        </el-image>
      </div>
      
      <!-- 右侧内容 -->
      <div class="product-header-content">
        <!-- 主标题 -->
        <div class="header-first-row"> 
          <h1 class="main-title">{{ product.name }}</h1>
          <div class="tags-container">
            <span v-for="(tag, tagIndex) in product.baseIndustryList" :key="tagIndex" class="tilted-tag">
              <span class="tag-text">{{ tag.name }}</span>
            </span>
          </div> 
        </div> 
        <!-- 元信息 -->
        <div class="meta-info">
          <span class="meta-item"><i style="margin-right: 3px;" class="el-icon-view"></i>浏览量 {{ product.pvCount }}</span>
          <!-- <span v-for="(tag, tagIndex) in product.baseIndustryList" :key="tagIndex" class="meta-item">{{ tag.name }}</span> -->
          <span class="upload-date">上传日期 {{ product.createTime }}</span>
        </div>
      </div>
    </div>

    <!-- 产品描述模块 -->
    <div class="description-section module-border">
      <h2 class="section-title">产品描述</h2>
      <p style="color: #ddd;">{{ product.name }}</p>
      <div style="text-align: center;">
      <img :src="product.image" alt="产品图片" style="width: 500px; height: 400px; margin: 20px 0;background-color: #fff;">

      </div>
      <p class="description-content">
        {{ product.description }}
      </p>
      
      <h2 class="section-title">产品参数</h2>
      <div class="params-list">
        <div v-if="parsedProductStandard && Object.keys(parsedProductStandard).length > 0">
          <p v-for="(value, key) in parsedProductStandard" :key="key" class="param-item">
            <strong>{{ formatParamName(key) }}：</strong>{{ value }}
          </p>
        </div>
        <p v-else-if="product.productStandard" class="param-item">
          {{ product.productStandard }}
        </p>
        <p v-else class="param-empty">暂无产品参数信息</p>
      </div>
    </div>

    <!-- 产品参数模块 -->
    <!-- <div class="params-section module-border">
      
    </div> -->
  </div>
</template>

<script>
import { getOneProductDetail } from '../../api/user';
export default {
  data() {
    return {
      product: {}
    };
  },
  computed: {
    // 解析产品参数
    parsedProductStandard() {
      try {
        // 如果productStandard已经是对象，直接返回
        if (this.product.productStandard && typeof this.product.productStandard === 'object') {
          return this.product.productStandard;
        }
        // 如果是JSON字符串，尝试解析
        if (typeof this.product.productStandard === 'string') {
          let jsonStr = this.product.productStandard.trim();
          // 尝试清理和解析JSON字符串，处理可能的转义字符问题
          try {
            // 尝试直接解析
            return JSON.parse(jsonStr);
          } catch (e) {
            // 如果失败，尝试处理可能的转义问题
            // 移除可能的前后空格或其他字符
            if (jsonStr.startsWith('{') && jsonStr.endsWith('}')) {
              // 尝试第二次解析
              return JSON.parse(jsonStr);
            }
            throw e; // 重新抛出异常
          }
        }
        return null;
      } catch (error) {
        console.error('解析产品参数失败:', error);
        // 解析失败时，返回原始字符串以便用户查看
        return { '原始参数': this.product.productStandard };
      }
    }
  },
  mounted() {
    // 在组件挂载后，可以根据实际情况加载数据
    // 例如从路由参数中获取id，然后调用API获取详情
    const id = this.$route.query.id;
    if (id) {
      // 根据id加载详情数据
      this.loadDetailcp(id)
    }
  },
  methods: {
    loadDetailcp(id) {
      // 调用API获取数据
      getOneProductDetail(id).then(res => {
        this.product = res.data
      }).catch(err => {
        console.error('获取详情失败:', err)
      })
    },
    // 格式化参数名称
    formatParamName(key) {
      // 可以根据需要添加更多的格式化逻辑
      // 例如首字母大写、驼峰转下划线等
      const paramMap = {
        'product': '产品',
        'productName': '产品名称',
        'model': '型号',
        'spec': '规格'
        // 可以根据实际数据添加更多映射
      };

      return paramMap[key] || key;
    }
  }
};
</script>

<style scoped>
/* 基础样式重置 */
.product-detail {
  font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
  max-width: 1800px;
  margin: 0 auto;
  padding: 20px;
}

/* 通用模块边框样式 */
.module-border {
  padding: 20px;
  margin-bottom: 20px;
  background-color: #04142B;
  box-sizing: border-box;
}

/* 产品头部模块 */
.product-header {
  padding: 25px;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  max-width: 1600px;
  margin: 0 auto; 
  border-bottom: 1px solid #666666;
}

/* 左侧图片容器 */
.product-image-container {
  width: 78px;
  height: 78px;
  flex-shrink: 0;
  border-radius: 4px;
  overflow: hidden;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 图片占位符 - 灰色背景 */
.product-image-placeholder {
  width: 100%;
  height: 100%;
  background-color: #6c757d;
  border-radius: 4px;
}

/* 右侧内容区域 */
.product-header-content {
  flex: 1;
  min-width: 0; /* 防止内容溢出 */
}

/* 主标题样式 */
.main-title {
  font-size: 28px;
  margin: 0 0 15px 0;
  text-align: left;
  font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
  font-weight: 500;
  color: #FFFFFF;
}

/* 元信息样式 */
.meta-info {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  color: #fff;
  gap: 10px 20px;
  margin: 10px 0;
}

.meta-item {
  white-space: nowrap;

font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
font-weight: 400;
font-size: 14px;
color: #DDDDDD;
}

.upload-date {
  margin-left: auto;
  display: inline-block;

  font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
font-weight: 400;
font-size: 14px;
color: #DDDDDD;
}

/* 模块标题通用样式 */
.section-title {
  font-size: 18px;
  color: #fff;
  padding-bottom: 10px;
  font-weight: 900;
}

/* 描述内容样式 */
.description-content {
  line-height: 1.8;
  color: #ddd;
  margin-bottom: 15px;
  font-size: 16px;
}

.highlights-title {
  font-size: 16px;
  margin-top: 20px;
  margin-bottom: 10px;
  color: #fff;
  font-weight: 500;
}

.highlights-list {
  padding-left: 20px;
  margin-bottom: 0;
}

.highlight-item {
  margin-bottom: 8px;
  line-height: 1.6;
  color: #fff;
}

/* 参数样式 */
.params-list {
  padding: 0;
  color: #fff;
}

.param-item {
  margin: 8px 0;
  line-height: 1;
  font-size: 14px;
  color: #ddd;

}

.param-item strong {
  color: #ddd;
  font-weight: 600;
  min-width: 80px;
  display: inline-block;
}

.param-empty {
  color: #fff;
  font-style: italic;
  text-align: center;
  padding: 20px;
  background-color: #04142B;
  border-radius: 4px;
}
.header-first-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tilted-tag{
  display: inline-block;
  border-radius: 0px 0px 0px 0px;
border: 1px solid #DDDDDD;
margin: 0 5px;
font-size: 12px;
padding: 5px;
transform: skew(-15deg);
color: #fff;
}
.tag-text{
  transform: skew(15deg);
}
/* 参数表格样式 */
.params-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

.param-key {
  width: 30%;
  padding: 10px;
  vertical-align: top;
  color: #fff;
  border-bottom: 1px solid #f0f0f0;
  font-weight: 500;
}

.param-value {
  width: 70%;
  padding: 10px;
  border-bottom: 1px solid #f0f0f0;
  color: #fff;
}

/* 响应式调整 */
@media (max-width: 600px) {
  .product-detail {
    padding: 10px;
  }

  .module-border {
    padding: 15px;
  }

  .product-header {
    padding: 20px 15px;
  }

  .main-title {
    font-size: 24px;
  }

  .meta-info {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }

  .upload-date {
    margin-left: 0;
  }

  .param-key,
  .param-value {
    display: block;
    width: 100%;
  }

  .param-item strong {
    min-width: 60px;
    font-size: 14px;
  }
}

/* 在<style scoped>部分修改产品描述模块的样式 */
.description-section {
  /* 添加固定高度 */
  max-height: 650px;
  /* 启用垂直滚动 */
  overflow-y: auto;
  /* 优化滚动条样式 */
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.05);
  max-width: 1600px;
  margin: 0 auto;
}

/* Webkit浏览器（Chrome, Safari等）的滚动条样式 */
.description-section::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.description-section::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 3px;
}

.description-section::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.description-section::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}
</style>